// Variables
// -----------------------

body {
    // Colors
    --color-primary: #ffffff; // BG-background
    --color-primary-1: #fafafa; // BG-hover background
    --color-primary-2: #f6f6f6; // BG-light background
    --color-primary-3: #efefef; // C-icon
    --color-primary-4: #d3d3d3; // BG-border
    --color-primary-5: #bfbfbf; // C-hover content

    --color-transparent-light: rgba(0, 0, 0, 0.1); // text-select color
    --color-transparent-dark: rgba(255, 255, 255, 0.1); // text-select color

    --color-invert-5: #909090; // C-light text
    --color-invert-4: #808080; // BG-modal background
    --color-invert-3: #656565; // C-large text
    --color-invert-2: #454545; // C-small text
    --color-invert-1: #202020; // BG-invert background
    --color-invert: #101010; // C-dark text

    --color-pink: #f683ad;
    --color-pink-dark: #e64680;
    --color-pink-light: #f9a8c5;

    --color-red: #f68a83;
    --color-red-dark: #f65b50; // cancel button
    --color-red-light: #faa198;

    // dawn theme
    --color-orange: #f5ac72;
    --color-orange-dark: #ec8d3e;
    --color-orange-light: var(--color-yellow);

    --color-yellow: #ffd275;
    --color-yellow-dark: var(--color-orange);
    --color-yellow-light: #fce3b7;
    --color-yellow-lightest: #fef2dd;

    --color-green: #bdda57;
    --color-green-dark: #81a011; // confirm button
    --color-green-light: #dbeaa3;

    --color-blue: #85d0ce;
    --color-blue-dark: #34657f;
    --color-blue-light: #c5e2ee;

    --color-null: var(--color-primary-4);

    --color-accent: var(--color-blue);
    --color-accent-text: var(--color-blue-dark);
    --color-accent-bg: var(--color-blue-light);
    --color-accent-bg-hover: #dfeff5;

    // Colors: Text + Content
    --title-color: var(--color-invert-3);
    --text-color: var(--color-invert-2);
    --dark-text-color: var(--color-invert);
    --light-text-color: var(--color-invert-5);
    --invert-text-color: var(--color-primary);
    --code-text-color: var(--color-accent-text);

    --text-hover-color: var(--color-invert-5);
    --text-active-color: var(--color-invert-5);

    --icon-color: var(--color-primary-5);
    --icon-hover-color: var(--color-invert-4);
    --icon-active-color: var(--color-invert-3);

    --pill-tab-color: var(--color-primary-3);
    --tag-text-color: var(--text-color);

    // For boolean + warning cases
    --color-true-light: var(--color-green-light);
    --color-true: var(--color-green);
    --color-true-dark: var(--color-green-dark);
    --color-false-light: var(--color-red-light);
    --color-false: var(--color-red);
    --color-false-dark: var(--color-red-dark);
    --color-warning: var(--color-yellow);
    --color-warning-dark: var(--color-yellow-dark);

    // Colors: Background + Borders
    --bg-color: var(--color-primary);
    --hover-bg-color: var(--color-primary-2);
    --light-bg-color: var(--color-primary-1);
    --select-bg-color: var(--color-primary-3);
    --dark-bg-color: var(--color-primary-4);
    --invert-select-color: var(--color-invert-2);
    --invert-bg-color: var(--color-invert-1);
    --modal-bg-color: var(--color-invert-1);
    --text-select-bg-color: var(--color-transparent-light);
    --progress-bg-color: var(--color-primary-3);
    --progress-color: var(--color-invert-3);
    --tag-bg-color: var(--color-primary-3);
    --hr-color: var(--color-invert-5);

    --scroll-bar-size: 16px;
    --scroll-bar-color: var(--color-primary-4);
    --scroll-bar-active-color: var(--color-primary-5);

    --border-color: var(--color-primary-3);
    --hover-border-color: var(--color-primary-4);
    --focus-border-color: var(--color-primary-5);
    --select-border-color: var(--color-invert-5);

    // Colors: Special Elements
    --query-editor-default-bg-color: var(--color-primary-1);
    --query-editor-default-gutter-color: var(--color-primary-2);

    --terminal-bg-color: var(--color-primary-1);
    --terminal-text-color: var(--color-invert-3);

    --table-element-bg-color: var(--color-primary-2);
    --table-hover-bg-color: var(--color-primary-3);

    --red-highlight: rgba(189, 8, 28, 0.5);
    --text-highlight: rgba(255, 255, 0, 0.5);

    // Type
    --family-sans-serif: 'Avenir Next', 'Avenir', 'Helvetica Neue', 'Arial',
        sans-serif;
    --family-monospace: monaco, monospace;
    --bold-font: 600;
    --extra-bold-font: 700;

    --xxxsmall-text-size: 0.6rem;
    --xxsmall-text-size: 0.7rem;
    --xsmall-text-size: 0.8rem;
    --small-text-size: 0.9rem;
    --text-size: 1rem;
    --med-text-size: 1.25rem;
    --large-text-size: 1.5rem;
    --xlarge-text-size: 2rem;
    --xxlarge-text-size: 2.5rem;
    --xxxlarge-text-size: 3rem;

    // Structure
    --max-width: 1200px;
    --border-radius: 4px;
    --border: solid 1px var(--border-color);
    --box-shadow: 0px 0px 8px var(--border-color);
}

body.dawn-theme {
    --color-primary: #fcf9f4; // BG-background
    --color-primary-1: #faf3e9; // BG-hover background
    --color-primary-2: #f7ecdf; // BG-light background
    --color-primary-3: #f5e6d4; // C-icon
    --color-primary-4: #f1ddc4; // BG-border
    --color-primary-5: #ecd1af; // C-hover content

    --color-transparent: rgba(0, 0, 0, 0.1); // text-select color

    --color-invert-5: #6d768f; // C-light text
    --color-invert-4: #6d768f; // BG-modal background
    --color-invert-3: #5c6377; // C-large text
    --color-invert-2: #5c6377; // C-small text
    --color-invert-1: #4b5160; // BG-invert background
    --color-invert: #4b5160; // C-dark text

    --color-accent: var(--color-orange);
    --color-accent-text: #9d5828;
    --color-accent-bg: var(--color-orange-light);
    --color-accent-bg-hover: #fdf0e3;

    --color-false: var(--color-orange);
    --color-false-dark: #9d5828;

    --color-blue: #79cdc7;
    --color-blue-dark: #1e7a75;
}

body.dark-theme {
    --color-primary: #302e2f; // BG-background
    --color-primary-1: #3b393b; // BG-hover background
    --color-primary-2: #484547; // BG-light background
    --color-primary-3: #5f5c5d; // C-icon
    --color-primary-4: #7d7d7d; // BG-border
    --color-primary-5: #909090; // C-hover content

    --color-invert-5: #9e9e9e; // C-light text
    --color-invert-4: #bfbfbf; // BG-modal background
    --color-invert-3: #d3d3d3; // C-large text
    --color-invert-2: #efefef; // C-small text
    --color-invert-1: #f7f7f7; // BG-invert background
    --color-invert: #ffffff; // C-dark text

    --color-accent: var(--color-blue-dark);
    --color-accent-text: var(--color-blue);
    --color-accent-bg: var(--color-blue-dark);
    --color-accent-bg-hover: #254a5d;

    --color-red-dark: #faa198;

    --color-green-dark: #a8d017;

    --modal-bg-color: var(--color-primary-1);
    --text-select-bg-color: var(--color-transparent-dark);

    --scroll-bar-color: var(--color-primary-3);

    --text-highlight: rgba(52, 101, 127, 0.5);

    font-weight: 500;
}

body.night-theme {
    --color-primary: #1d335e; // BG-background
    --color-primary-1: #223b6d; // BG-hover background
    --color-primary-2: #2b4b8b; // BG-light background
    --color-primary-3: #345ca9; // C-icon
    --color-primary-4: #406dc4; // BG-border
    --color-primary-5: #5e84cd; // C-hover content

    --color-transparent: rgba(255, 255, 255, 0.1); // text-select color

    --color-invert-5: #cadafb; // C-light text
    --color-invert-4: #cadafb; // BG-modal background
    --color-invert-3: #dce6fc; // C-large text
    --color-invert-2: #dce6fc; // C-small text
    --color-invert-1: #eef3fe; // BG-invert background
    --color-invert: #eef3fe; // C-dark text

    --color-accent: var(--color-yellow);
    --color-accent-text: var(--color-yellow-light);
    --color-accent-bg: #534b94;
    --color-accent-bg-hover: #3c3c77;

    --text-active-color: #afc4f0;

    --modal-bg-color: var(--color-primary-1);
    --text-select-bg-color: var(--color-transparent-dark);

    --scroll-bar-color: var(--color-primary-3);

    font-weight: 500;

    --color-red: var(--color-pink);
    --color-red-dark: var(--color-pink-light);
    --color-red-light: var(--color-pink-dark);

    --color-green-dark: #a8d017;

    --tag-text-color: var(--invert-text-color);
}

body.lush-theme {
    --color-primary: #2b433f; // BG-background
    --color-primary-1: #334f4a; // BG-hover background
    --color-primary-2: #3a5b55; // BG-light background
    --color-primary-3: #4a736c; // C-icon
    --color-primary-4: #598b82; // BG-border
    --color-primary-5: #6ba097; // C-hover content

    --color-transparent: rgba(255, 255, 255, 0.1); // text-select color

    --color-invert-5: #fccb7f; // C-light text
    --color-invert-4: #fccb7f; // BG-modal background
    --color-invert-3: #ffd889; // C-large text
    --color-invert-2: #ffd889; // C-small text
    --color-invert-1: #ffd889; // BG-invert background
    --color-invert: #ffd889; // C-dark text

    --color-accent: var(--color-orange);
    --color-accent-text: var(--color-orange-light);
    --color-accent-bg: var(--select-bg-color);
    --color-accent-bg-hover: var(--hover-bg-color);

    --text-hover-color: #f9bb78;
    --text-active-color: #fbc37b;

    --modal-bg-color: var(--color-primary-1);
    --text-select-bg-color: var(--color-transparent-dark);

    --scroll-bar-color: var(--color-primary-3);

    font-weight: 500;

    --color-red: #e87d6a;
    --color-red-dark: #e87d6a;

    --tag-text-color: var(--invert-text-color);
}
